<template>
  <a-modal
    v-model:visible="visible"
    title="图片编辑"
    @ok="handleOk"
    width="1000px"
    :maskClosable="false"
    :closable="false"
    :keyboard="false"
    @cancel="handleCancel"
  >
    <div style="height: 65vh">
      <div id="tui-image-editor"></div>
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
import { nextTick, onMounted, reactive } from "vue";

import "tui-image-editor/dist/tui-image-editor.css";
import "tui-color-picker/dist/tui-color-picker.css";
const ImageEditor = require("tui-image-editor");

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
});
const emits = defineEmits(["funUploadBase64"]);
const localeZh: any = {
  Crop: "裁剪",
  Delete: "删除",
  DeleteAll: "删除所有",
  Load: "选择图片",
  Download: "下载图片",
  Sharpen: "锐化",
  Emboss: "浮雕",
  Blur: "模糊",
  Sepia: "深褐色",
  Sepia2: "深褐色2",
  Invert: "反色",
  Grayscale: "灰度化",
  "Remove White": "移除白色",
  Threshold: "阈值",
  Distance: "距离",
  Filter: "滤镜",
  "Color Filter": "颜色滤镜",
  Pixelate: "像素化",
  Noise: "噪点",
  Brightness: "亮度",
  Redo: "重做",
  Undo: "撤销",
  Reset: "重设",
  Flip: "翻转",
  Rotate: "旋转",
  Draw: "绘画",
  Shape: "图形",
  Icon: "图标",
  Text: "文字",
  Mask: "遮罩",
  Apply: "应用",
  Cancel: "取消",
  Custom: "自定义",
  Square: "正方形",
  "Load Mask Image": "选择遮罩图片",
  Range: "角度",
  Color: "颜色",
  Fill: "填充",
  Stroke: "边框",
  Rectangle: "长方形",
  Circle: "圆形",
  Triangle: "三角形",
  Bold: "加粗",
  Italic: "倾斜",
  Underline: "下横线",
  Left: "左对齐",
  Center: "居中",
  Right: "右对齐",
  "Text size": "文本大小",
  Arrow: "箭头",
  "Arrow-2": "箭头2",
  "Arrow-3": "箭头3",
  Value: "值",
  "Custom icon": "自定义图标",
  "Gradient transparency": "渐变透明",
  Blend: "混合",
  Multiply: "叠加",
  Tint: "色调",
  Heart: "心",
  Bubble: "泡泡",
  Location: "位置",
  Polygon: "多边形",
  "Star-1": "星星1",
  "Star-2": "星星2",
  Free: "自由",
  Straight: "直线",
  ZoomIn: "放大",
  ZoomOut: "缩小",
  Hand: "拖动",
  History: "历史",
  "Flip X": "X 轴",
  "Flip Y": "Y 轴",
};
const customTheme: any = {
  // image 左上角度图片
  "common.bi.image": "", // 在这里换上你喜欢的logo图片
  "common.bisize.width": "0px",
  "common.bisize.height": "0px",
  "common.backgroundImage": "none",
  "common.backgroundColor": "#1e1e1e",
  "common.border": "1px solid #444",

  // header
  "header.backgroundImage": "none",
  "header.backgroundColor": "#f3f4f6",
  "header.border": "0px",
  "header.display": "none",

  // load button
  "loadButton.backgroundColor": "#fff",
  "loadButton.border": "1px solid #ddd",
  "loadButton.color": "#222",
  "loadButton.fontFamily": "NotoSans, sans-serif",
  "loadButton.fontSize": "12px",
  "loadButton.display": "none", // 可以直接隐藏掉

  // download button
  "downloadButton.backgroundColor": "#fdba3b",
  "downloadButton.border": "1px solid #fdba3b",
  "downloadButton.color": "#fff",
  "downloadButton.fontFamily": "NotoSans, sans-serif",
  "downloadButton.fontSize": "12px",
  "downloadButton.display": "none", // 可以直接隐藏掉

  // icons default
  "menu.normalIcon.color": "#8a8a8a",
  "menu.activeIcon.color": "#555555",
  "menu.disabledIcon.color": "#434343",
  "menu.hoverIcon.color": "#e9e9e9",
  "submenu.normalIcon.color": "#8a8a8a",
  "submenu.activeIcon.color": "#e9e9e9",

  "menu.iconSize.width": "24px",
  "menu.iconSize.height": "24px",
  "submenu.iconSize.width": "32px",
  "submenu.iconSize.height": "32px",

  // submenu primary color
  "submenu.backgroundColor": "#1e1e1e",
  "submenu.partition.color": "#858585",

  // submenu labels
  "submenu.normalLabel.color": "#858585",
  "submenu.normalLabel.fontWeight": "lighter",
  "submenu.activeLabel.color": "#fff",
  "submenu.activeLabel.fontWeight": "lighter",

  // checkbox style
  "checkbox.border": "1px solid #ccc",
  "checkbox.backgroundColor": "#fff",

  // rango style
  "range.pointer.color": "#fff",
  "range.bar.color": "#666",
  "range.subbar.color": "#d1d1d1",

  "range.disabledPointer.color": "#414141",
  "range.disabledBar.color": "#282828",
  "range.disabledSubbar.color": "#414141",

  "range.value.color": "#fff",
  "range.value.fontWeight": "lighter",
  "range.value.fontSize": "11px",
  "range.value.border": "1px solid #353535",
  "range.value.backgroundColor": "#151515",
  "range.title.color": "#fff",
  "range.title.fontWeight": "lighter",

  // colorpicker style
  "colorpicker.button.border": "1px solid #1e1e1e",
  "colorpicker.title.color": "#fff",
};
const state = reactive({
  instance: null,
});
/**
 * 保存图片
 */
const handleOk = () => {
  const base64String: any = state.instance?.toDataURL(); //base64 文件
  emits("funUploadBase64", base64String);
};
const handleCancel = () => {
  emits("funUploadBase64", "");
};
const initData = (options: any = {}) => {
  nextTick(() => {
    state.instance = new ImageEditor(
      document.querySelector("#tui-image-editor"),
      {
        editVisible: false,
        editUrl: options.urls,
        postAction: "",
        mobjectId: 0,
        nameVisible: false,
        nameInput: "",
        useDefaultUI: !0,
        usageStatistics: false, //这个一定要写要不然会报错
        includeUI: {
          loadImage: {
            path: options.urls, //加载的图片链接
            name: "image", //图片名称（不重要）
          },
          //操作菜单栏
          menu: [
            "crop", // 裁切
            "flip", // 翻转
            "rotate", // 旋转
            "draw", // 添加绘画
            "shape", // 添加形状
            "icon", // 添加图标
            "text", // 添加文本
            "mask", // 添加覆盖
            "filter", // 添加滤镜
          ],
          menuBarPosition: "left", //操作栏位置
          initMenu: "filter",
          locale: localeZh, //语言
          theme: customTheme, //主题样式
        },
        cssMaxWidth: 700, //宽
        cssMaxHeight: 500, //高
      }
    );
  });
};
defineExpose({ initData });
</script>
<style lang="scss">
.tui-image-editor-container .tui-image-editor-main {
  top: 0;
}
</style>